<template>
  <div>
    <!-- 产品内容列表组件 -->
    <van-dropdown-menu>
      <van-dropdown-item title="综合" v-model="value1" />

      <van-dropdown-item
        title="价格"
        @change="priceChange"
        v-model="priceSortVal"
        :options="option2"
      />

      <van-dropdown-item
        title="分类"
        @change="categoryChange"
        v-model="categoryVal"
        :options="filterCategory"
      />
    </van-dropdown-menu>

    <!-- 搜索提示 -->
    <van-empty v-if="goodsList.length==0" image="search" description="没有任何商品" />
    
    <Products v-else :filterCategory="filterCategory" :goodsList="goodsList" />
  </div>
</template>
<script>
import Products from "@/components/Products.vue";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    Products,
  },
  props: ["filterCategory", "goodsList"],
  data() {
    return {
      // 这里放数据
      categoryVal: 0,
      value1: 0,
      priceSortVal: "",
      option2: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
    };
  },
  beforeUpdate() {
    // 数据挂载完毕，遍历filterCategory数组，看看哪一项的checked为true
    // 遍历的时候  遇到checked为true时，就把  this.categoryVal改造成它的value值，这一项就被勾选
    console.log("*******");
    // console.log(this.filterCategory);
    // this.categoryVal=this.filterCategory[1].value
    this.filterCategory.map((item) => {
      if (item.checked == true) {
        this.categoryVal = item.value;
        return;
      }
    });
  },
  //   计算属性  类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  //   方法集合
  methods: {
    priceChange(value) {
      this.$emit("priceChange", value);
    },
    categoryChange(value) {
      this.$emit("categoryChange", value);
    },
  },
  // 声明周期  -  创建完成（可以访问当前this示例）
  created() {},
};
</script>
<style lang='less' scoped>
// @import url(); 引入公共css类
.abc{
  background-color: #e4ecbe;
}
</style>